<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.11.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .gwc{

        width: 200px;
        height: 100px;
        font-size: 25px;
        line-height: 100px;
        text-align: center;
        margin: 0 auto;
        position: relative;
    }
    .qwe{
        text-decoration: none;
         color: black;
    }
    .ert{
        display: inline-block;
        width: 40px;
        height: 40px;
        background-image: url(img/shopping-cart\ \(1\).gif);
        position: absolute;
        left: 20px;
        top: 30px;
        
    }
    .box1{
        width: 950px;
        height: 800px;
        background-color: antiquewhite;
       
    }
    .box2{
        width: 235px;
        height: 362px;
        background-color: aquamarine;
        float: left;
    }
    .zp{
        width: 200px;
        height: 200px;
        margin-left: 15px;
    }
    .hong{
        color: brown;
    }
    .bp{
        display: inline-block;
    }
</style>
<body>

    <div class="gwc">
        <span class="ert"></span>
        <a class="qwe" href="">购物车</a>
    </div>


<div class="box1">


<div class="box2">
<!-- <img class="zp" src="img/gw1.jpg" alt="">
<span class="hong">比瑞吉</span>
<p class="bp">比瑞吉俱乐部 健康膳食配方 成犬粮 10kg</p>
<span class="hong">￥205.00</span>
<span>10.25元/每斤</span>
<p>月销2064袋</p>
<input type="button" value="加入购物车" /> -->
</div>

         
    </div>

    <script>
axios.get("http://localhost:3000/shangpindata").then(function(resData){
    for(let i=0;i<resData.data.length;i++){
        let str=`<div class="box2"><a href="xiangqingye.html?id=${resData.data[i].id}">
    <img src="${resData.data[i].pimg}">
<span class="bp">${resData.data[i].pname}</span>
<p class="bp">${resData.data[i].pjieshao}</p>
<span class="hong">${resData.data[i].price}</span>
<span>${resData.data[i].pjinshu}</span>
<p>${resData.data[i].pyuexiao}</p>
<input type="button" value="加入购物车" class="btn"  />

   ` 
$(".box1").append(str)
}
})

    </script>
    
</body>
</html>